import React from "react";
import {type} from 'fly';

import {dateFormat,differenceDate} from '../utils';
import BarNavUiComponent from '../component/Logic_barNavUi';

export default function X (props){

    props = Object.assign({},props);

    const {BarComRender,canvasWidth,data,dateArr,canvasStartDate} = props;

    const GARD_WIDTH = 40;

    let hightDataArr = []; //格式后的数据

    function createSmallDataArr(date,data){
        // 模板,数据格式
        let module = {
            endDate:date,
            data:[data]
        };
        return module;
    }

    data && data.forEach((item)=>{
        const date = new Date(item.startDate).valueOf(); //当前遍历的stratDate

        const curDate = item.scheduleVaryDays;

        let endDate = new Date(item.endDate);

        let flag = 0;

        endDate = endDate.setDate(endDate.getDate() + curDate).valueOf();

        // 找到合适的item放到对应的data数组中;
        for(let i= 0,j = hightDataArr.length; i<j; ++i){
            if( date > hightDataArr[i].endDate ){
                hightDataArr[i].data.push(item);
                flag = 1;
                break;
            }
        };

        if(flag === 0){
            hightDataArr.push(createSmallDataArr(endDate,item));
        }
    });

    // 计算left位置
    const calculatePositionWidth = (productionDays)=>{
        return productionDays * GARD_WIDTH;
    };

    const switchCalculate = (status,delayDay)=>{
        const MAPPING = [
            "","",{name:"advance",value:"前"},{name:"end",value:"后"},
            {name:"before",value:"提前"},{name:"delay",value:"延期"}
        ];

        if(status == 1){ return null; }

        const width = delayDay*GARD_WIDTH;
        return <span data-type="tail" aria-color={MAPPING[status].name} style={{width}}> {MAPPING[status].value} </span>
    };

    const calculatePositionLeft = (start)=>{
        let date = canvasStartDate;

        if(type(date) === "date"){
            date = dateFormat(canvasStartDate._d);
        }

        return differenceDate(canvasStartDate, start)/1000/60/60/24 * GARD_WIDTH;
    };

    const dateArrRender = ()=>
        dateArr.map((dayValueOf,_i)=>
            <BarNavUiComponent
                key={`navBar-${_i}`}
                index={_i}
                isShaft={false}
                date={dayValueOf}
               // isEmpty={stylePlanData[dayValueOf] === "0"}
               // MAX_TOTAL_COUNT={this.MAX_TOTAL_COUNT}
            />
        );

    const calculateProcessWidth = (item)=>{
        if(item.count > item.planCount){
            return item.productionDays * GARD_WIDTH;
        }

        return  item.count/item.planCount * (item.productionDays * GARD_WIDTH);
    }

    return (
        <div className="Yyd-chart-transverse" style={{width:canvasWidth}}>
            <div className="Yyd-chart-stroke-container">
                <ul className="Yyd-chart-shaft">
                    {dateArrRender()}
                </ul>
            </div>
            <div className="Yyd-chart-transverse-canvas">
                {
                    hightDataArr.map((_item,_index)=>
                        <div className="Yyd-chart-transverse-item">
                            {
                                _item.data.map((item,index)=>
                                    <div className="Yyd-chart-molecular-item-wrapper"
                                         style={{
                                             width:calculatePositionWidth(item.productionDays),
                                             left:calculatePositionLeft(item.startDate)
                                         }}
                                    >
                                        <div  data-type="main" >
                                                    <span style={{width:`${calculateProcessWidth(item)}`}}>
                                                        <span> {`${item.count}/${item.planCount}`} </span>
                                                    </span>
                                        </div>

                                        <span data-type="number"> {item.styleNo} </span>
                                        {
                                            switchCalculate(item.scheduleProStatus,item.scheduleVaryDays)
                                        }
                                    </div>
                                )
                            }
                        </div>
                    )
                }
            </div>
        </div>
    )
}